<template>
	<view class="content">
		<view class="head-portrait">
			<!--
			    author: 李文昊
			    description: 头像
			-->
			<image v-if="headThumb == null" class="head-portrait-image" src="@/static/headPortrait.png" mode=""></image>
			<image v-if="headThumb != null" class="head-portrait-image" :src="Userinfo.imgurl" mode="" @click="chooseImage"></image>
		</view>
		<view class="information">
			<view class="info-juzhong">
				<view class="Nickname">
					<!--
					    author: 李文昊
					    description: 昵称
					-->
					<text>{{Userinfo.nickname}}</text>
				</view>
				<view class="phoneNumber">
					<!--
					    author: 李文昊
					    description: 电话
					-->
					<text>{{Userinfo.phoneNumber}}</text>
				</view>
			</view>
		</view>
		<view class="setUserInfo">
			<!--
			    author: 李文昊
			    description: 设置按钮
			-->
			<image class="setUserInfo-image" src="@/static/setUp.png" mode="" @click="uploadHead"></image>
		</view>
		
	</view>
</template>

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE,
		myUploadFile,
	} from "../../util/network.js"
	export default {
		data() {
			return {
				Userinfo: {
					imgurl: `${ONLINE_SERVER_ADDRESS_BASE}/file/preview/` + this.headThumb,
					nickname: this.name,
					phoneNumber: this.phoneNumber
				},
				token:'',
			};
		},
		props: {
			name: {
				type: String
			},
			phoneNumber:{
				type:String
			},
			headThumb:{
				type:String
			},
		},
		methods: {
			chooseImage(){
				uni.previewImage({
					current: 0,
					urls: [`${ONLINE_SERVER_ADDRESS_BASE}/file/preview/` + this.headThumb]
				})
				
			},
			uploadHead(){
				uni.showActionSheet({
					itemList: ['修改头像','修改密码'],
					success: function(res) {
						console.log(res);
						if(res.tapIndex == 0){
							uni.chooseImage({
								count: 1,
								sourceType: ['album', 'camera'],
								// #ifdef MP-WEIXIN
								sizeType: ['compressed'],
								// #endif
								success: (res) => {
									this.token = uni.getStorageSync('token')
									let a = myUploadFile(this.token, res.tempFilePaths[0])
									 a.then((v)=>{
										 uni.request({
										 	url:`${ONLINE_SERVER_ADDRESS_BASE}/user/mod-head-thumb`,
										 	header: {
										 		'Authorization': this.token,
										 	},
										 	data: {
										 		headThumb: v.toString(),
										 	},
										 	method:'POST',
										 	success: function (res) {
										 		if(res.data.code == 200){
										 			uni.showModal({
										 				content:'修改成功，重新登陆后生效',
										 				showCancel:false
										 			})
										 		}
										 	}
										 })
										 console.log("zuizhongid",this.chargeImgId)
									})
								}
							})
						}
						if(res.tapIndex == 1){
							uni.navigateTo({
								url:'../../pages/checkCodeLogin/checkCodeLogin'
							})
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				})

			},
		}
	}
</script>

<style>
	.content {
		width: 100%;
		/* 清除浮动 */
		overflow: hidden;
		border-bottom: 1px solid rgba(228, 228, 228, 1);
		background-color: rgba(255, 255, 255, 1);
	}

	/* 头像大div */
	.head-portrait {
		float: left;
		height: 240rpx;
		width: 25%;
		position: relative;
	}

	/* 头像图像 */
	.head-portrait-image {
		/* 水平垂直居中 */
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		/* 宽高 */
		width: 144rpx;
		height: 144rpx;
		border-radius: 50%;
	}

	/* 昵称电话大div，利用table属性将内容居中*/
	.information {
		float: left;
		width: 65%;
		height: 240rpx;
		display: table;
	}

	/* table单元格，设置 vertical-align: middle;可使得内容居中*/
	.info-juzhong {
		display: table-cell;
		vertical-align: middle;
		font-family: '微软雅黑';
		font-weight: 400;
		color: #666666;
	}

	/* 设置大div */
	.setUserInfo {
		float: left;
		position: relative;
		width: 10%;
		height: 240rpx;
	}

	/* 设置的图标 */
	.setUserInfo-image {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 40rpx;
		height: 40rpx;
	}
</style>
